<template>
  <scroll-view
    class="home-list"
    scroll-y
    @scrolltolower="scroll"
    :refresher-triggered="triggered"
    :refresher-threshold="100"
    @refresherrestore="onRestore"
    refresher-enabled
    @refresherrefresh="onRefresh"
    :ower-threshold="0"
  >
    <template v-if="arr && arr.length > 0">
      <u-radio-group placement="column" v-model="radioGroup">
        <view class="title-box" v-for="item in arr" :key="item.id">
          <view class="title">
            <view class="radio">
              <u-radio :name="item.id"></u-radio>
            </view>
            <text class="txt u-line-1">{{ item.name }} - {{ item.empno }}</text>
          </view>
        </view>
      </u-radio-group>
    </template>
    <template v-else>
      <view class="info-box">
        <Empty />
      </view>
    </template>
    <view class="loading animation-scale-up" v-if="loading"></view>
    <view class="scroll-no-data" v-if="scrollNoData">已拉到最底部</view>
  </scroll-view>
</template>

<script>
import { setPageData } from "@/store/user";
import Empty from "@/components/empty";
import { setToken, getToken, getUserInfo, getNotice } from "@/store/user.js";
export default {
  components: {
    Empty,
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    multiple: {
      type: Boolean,
      default: true,
    },
    scrollNoData: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    data: {
      handler: function (val, oldVal) {
        this.arr = val;
      },
      deep: true,
      immediate: true,
    },
    radioGroup: {
      handler: function (val, oldVal) {
        this.$emit("itemClick", val);
      },
    },
  },
  data() {
    return {
      loading: true,
      noData: false,
      arr: [],
      triggered: false,
      radioGroup: this.multiple ? [] : "",
    };
  },
  onReady: async function () {},
  onPullDownRefresh() {
    uni.stopPullDownRefresh();
  },
  mounted() {},
  methods: {
    clickMore(index) {
      this.$set(this.arr, index, {
        ...this.arr[index],
        showMore: !this.arr[index].showMore,
      });
    },
    getColor(item2) {
      return item2 == "待排产"
        ? "#E5963A"
        : item2 == "已排产"
        ? "#998BF2"
        : item2 == "下发"
        ? "#6BBEE1"
        : item2 == "生产"
        ? "#73D8A6"
        : item2 == "中断"
        ? "#D48B3E"
        : item2 == "暂停"
        ? "#D8BE49"
        : item2 == "完成"
        ? "#4668E2"
        : item2 == "转产中"
        ? "#E794C9"
        : item2 == "转产完成"
        ? "#C25BC6"
        : item2 == "调机中"
        ? "#D8B2F2"
        : item2 == "调机完成"
        ? "#8698F6"
        : item2 == "拆模"
        ? "#EA709F"
        : "#31b099";
    },
    setLoading(val) {
      this.loading = val;
    },
    scroll(e) {
      const that = this;
      if (!that.noData) {
        this.loading = true;
        this.$emit("scrollBottom", (val) => {
          that.noData = val;
          setTimeout(() => {
            this.loading = false;
          }, 400);
        });
      }
    },
    onRefresh() {
      if (this._freshing) return;
      this._freshing = true;
      this.triggered = true;
      this.$emit("onRefresh");
      setTimeout(() => {
        this.triggered = false;
        this._freshing = false;
      }, 1000);
    },
    onRestore() {
      this.triggered = "restore"; // 需要重置
    },
    itemClick(item) {
      if (this.type !== "1") return;
      setPageData(item);
      this.$emit("itemClick", item);
    },
    ok(val) {
      this.$emit("ok", val);
    },
  },
};
</script>

<style lang="scss" scoped>
.home-list {
  // flex: 1;
  height: 100%;
  overflow: scroll;
  background-color: #fff;
  margin: 0 20px;
  width: auto;

  .title {
    font-size: 32rpx;
    padding: 10px 40rpx;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;

    .txt {
      flex: 1;
    }

    .tag-box {
      display: flex;
      align-items: center;
    }
  }
}
</style>
